状态机播放

有关在 Rive 编辑器中设计和构建状态机的更多信息，请参阅状态机概述。

Rive 状态机是一组动画状态及其之间的过渡。在运行时，直接观察或修改状态的能力有限。这是有意为之，因为这将限制设计师在不产生破坏性变更的情况下修改状态机的能力。状态机是通过基于数据绑定属性条件的过渡来间接控制的。

设计师在 Rive 编辑器中为每个画板分配一个默认状态机。他们可以创建多个状态机，每个表示不同的状态和过渡配置。在渲染 Rive 文件和画板时，您可以选择要播放的状态机。如果未指定状态机，则使用该画板的默认状态机。

控制播放

状态机通过随时间「推进」来播放。这每帧执行一次，推进量为帧之间的时间间隔。例如，对于以每秒 60 帧运行的图形，状态机每帧大约推进 16.67 毫秒（1/60 秒）。这种推进会评估关键帧、过渡、数据绑定变化，最终影响可见的画板元素，从而产生随时间运动的视觉效果。

此运行时提供了一种控制状态机是否播放的方式。当暂停或停止时，状态机不会推进，最后渲染的帧保持可见。从暂停状态播放时，状态机从暂停位置恢复；而从停止状态播放时，它从入口状态重新开始。

除了暂停/停止状态外，状态机还可能「settle」（稳定）。这是一种优化，Rive 运行时检测到不会发生进一步变化（例如，没有活跃的过渡或动画）。处于 settle 状态时，状态机也会停止推进。这通过避免不必要的计算来提高性能和降低能耗。状态机通过改变其状态的外部操作（如用户输入或数据绑定更改）来解除 settle。您还可以通过调用 play 强制解除 settle，但如果没有任何工作需要完成，它可能立即重新 settle。

播放状态机

新版运行时（推荐）

默认情况下，RiveView 自动使用编辑器中配置的默认画板和状态机。在大多数情况下，您只需要提供 file 属性。

对于编程控制，您可以选择指定 artboardName 和 stateMachineName 属性来使用不同的画板或状态机。

export default function PlaybackExample() {
  const { riveFile } = useRiveFile(
    'https://cdn.rive.app/animations/vehicles.riv'
  );

  return (
    <View style={styles.container}>
      <View style={styles.riveContainer}>
        {riveFile ? <RiveView file={riveFile} style={styles.rive} /> : null}
      </View>
    </View>
  );
}

控制状态机播放

为了获得更多控制，您可以管理播放并设置画板/状态机组合：

• autoPlay — boolean，默认 true。自动开始播放状态机。
• artboardName — String。要显示的画板名称。如果未设置，将使用编辑器中配置的默认画板。
• stateMachineName — String。要播放的状态机名称。如果未设置，将使用编辑器中配置的默认状态机。

并在 Rive 视图引用上管理 play、pause 和 reset：

import { Fit, RiveView, useRive, useRiveFile } from '@rive-app/react-native';

export default function PlaybackExample() {
  const { riveViewRef, setHybridRef } = useRive();
  const { riveFile } = useRiveFile(
    'https://cdn.rive.app/animations/vehicles.riv'
  );

  const play = () => {
    riveViewRef?.play();
  };

  const pause = () => {
    riveViewRef?.pause();
  };

  const reset = () => {
    riveViewRef?.reset();
  };

  return (
    <View style={styles.container}>
      <View style={styles.riveContainer}>
        {riveFile ? (
          <RiveView
            file={riveFile}
            hybridRef={setHybridRef}
            autoPlay={false}
            artboardName="Truck" // 指定要播放的画板
            stateMachineName="bumpy" // 指定要播放的状态机
            style={styles.rive}
          />
        ) : null}
      </View>
      <Button onPress={play} title="Play" />
      <Button onPress={pause} title="Pause" />
      <Button onPress={reset} title="Reset" />
    </View>
  );
}

旧版运行时

自动播放状态机

要默认自动播放状态机，只需将 autoplay 设置为 true。

<Rive
  resourceName={'vehicles'}
  autoplay={true}
  stateMachineName="bumpy"
/>

控制状态机播放

您可以使用 play 和 pause 方法手动播放和暂停状态机。

import Rive, { RiveRef } from 'rive-react-native'

export default function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handlePlayPress = () => {
    riveRef?.current?.play();
  };

  const handlePausePress = () => {
    riveRef?.current?.pause();
  };

  return (
    <View>
      <Rive
        resourceName="truck_v7"
        stateMachineName="bumpy"
        ref={riveRef}
      />
      <Button onPress={handlePlayPress} title="play">
      <Button onPress={handlePausePress} title="pause">
    </View>
  );
}